<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in cardData" :key="index">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-content">
            <div class="card-icon" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ item.value }}</div>
              <div class="card-label">{{ item.label }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { User, ShoppingCart, Money, Goods } from '@element-plus/icons-vue'

const cardData = [
  {
    label: '用户总数',
    value: '1,234',
    icon: 'User',
    color: '#409EFF'
  },
  {
    label: '订单总数',
    value: '567',
    icon: 'ShoppingCart',
    color: '#67C23A'
  },
  {
    label: '销售额',
    value: '¥89,765',
    icon: 'Money',
    color: '#E6A23C'
  },
  {
    label: '商品总数',
    value: '890',
    icon: 'Goods',
    color: '#F56C6C'
  }
]
</script>

<style lang="scss" scoped>
.dashboard-container {
  .dashboard-card {
    margin-bottom: 20px;
    
    .card-content {
      display: flex;
      align-items: center;
      
      .card-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        
        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }
      
      .card-info {
        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 4px;
        }
        
        .card-label {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}
</style> 